<div id="profileEdit" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="" role="tabpanel" data-example-id="togglable-tabs">
                <ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist">
                    <li role="presentation" class="active">
                        <a href="#tab_content1" id="home-tab" role="tab" data-toggle="tab" aria-expanded="true"
                        >User Info</a
                        >
                    </li>
                    <li role="presentation" class="">
                        <a href="#tab_content2" role="tab" id="profile-tab" data-toggle="tab" aria-expanded="false"
                        >User password</a
                        >
                    </li>
                </ul>
                <div id="myTabContent" class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="tab_content1" aria-labelledby="home-tab">
                        <div class="modal-body">
                            <form class="form-horizontal form-label-left" action="javasript:void(0);">
                                <div class="item form-group">
                                    <label class="col-form-label col-md-3 col-sm-3 label-align"
                                    >User Name <span class="required">*</span>
                                    </label>
                                    <div class="col-md-6 col-sm-6">
                                        <input
                                                type="text"
                                                v-model="user.userName"
                                                class="form-control"
                                                placeholder="User Name"
                                                required=""
                                        />
                                    </div>
                                </div>
                                <div class="item form-group">
                                    <label class="col-form-label col-md-3 col-sm-3 label-align"
                                    >User Email <span class="required">*</span>
                                    </label>
                                    <div class="col-md-6 col-sm-6">
                                        <input
                                                type="text"
                                                v-model="user.email"
                                                class="form-control"
                                                placeholder="User Email"
                                                required=""
                                        />
                                    </div>
                                </div>
                                <div class="item form-group">
                                    <label class="col-form-label col-md-3 col-sm-3 label-align"
                                    >Image Type<span class="required">*</span>
                                    </label>
                                    <div class="col-md-6 col-sm-6">
                                        <select
                                                name="imageTypes"
                                                class="form-control"
                                                v-model="user.imageType"
                                                @change="refreshFileInput()"
                                        >
                                            <option
                                                    v-for="(imageType, index) in imageTypes"
                                                    :value="imageType.name"
                                                    :size="imageType.size"
                                                    :length="imageType.length"
                                                    :height="imageType.height"
                                            >
                                                {{imageType.name}}
                                            </option>
                                        </select>
                                    </div>
                                </div>
                                <div class="item form-group">
                                    <label class="col-form-label col-md-3 col-sm-3 label-align"
                                    >User Image <span class="required">*</span>
                                    </label>
                                    <div class="col-md-6 col-sm-6">
                                        <input type="hidden" v-model="user.userImage"/>
                                        <input id="uploadImage" name="file" type="file" multiple="true"/>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="button" @click="updateModel()" class="btn btn-primary">Save changes</button>
                        </div>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="tab_content2" aria-labelledby="profile-tab">
                        <div class="modal-body">
                            <form class="form-horizontal form-label-left" action="javasript:void(0);">
                                <div class="item form-group">
                                    <label class="col-form-label col-md-3 col-sm-3 label-align"
                                    >原密码 <span class="required">*</span>
                                    </label>
                                    <div class="col-md-6 col-sm-6">
                                        <input type="password" v-model="user.password" class="form-control"
                                               placeholder="Password"
                                               required=""/>
                                    </div>
                                </div>
                                <div class="item form-group">
                                    <label class="col-form-label col-md-3 col-sm-3 label-align"
                                    >新密码 <span class="required">*</span>
                                    </label>
                                    <div class="col-md-6 col-sm-6">
                                        <input type="password" v-model="editPassword.password" class="form-control"
                                               placeholder="Password"
                                               required=""/>
                                    </div>
                                </div>
                                <div class="item form-group">
                                    <label class="col-form-label col-md-3 col-sm-3 label-align"
                                    >确认密码<span class="required">*</span>
                                    </label>
                                    <div class="col-md-6 col-sm-6">
                                        <input type="password" v-model="editPassword.newPassword" class="form-control"
                                               placeholder="Confirm Password"
                                               required=""/>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="button" @click="updateModel_1()" class="btn btn-primary">Save changes</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
